<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app" style="padding: 3vw;">

    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;border: solid 1px greenyellow;padding-bottom: 3vw;">

		<h1 style="color: yellowgreen;">{{ titlex }}</h1>
	
		<div style="background-color: yellow; width: 30vw;height: 15vw;display: flex;flex-direction: column;line-height: 3vw;padding: 3vw;border-radius: 5vw;font-size: 1.8vw;">
			<div>{{ explain }}</div>
			<div>{{ age }}</div>
			<div>{{ xinqu }}</div>
			<div>{{ zy }}</div>
		</div>
	</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm= Vue.createApp({
        data(){
          return{
			titlex:'个人基本信息',
            explain:'姓  名： 殷瑶瑶',
			age:'年  龄：19',
			xinqu:'爱  好： 睡觉',
			zy:'专  业： 计算机应用',
           }
        }     
     }).mount('#app');
</script>
</body>
</html>
